<template>
  <el-form ref="form" label-position="right" :model="currentRow" :rules="rulesUnit" label-suffix="："
           label-width="120px">
    <div class="geology">
      支护措施
    </div>
    <el-form-item label="边坡级数" prop="slopeLevel ">
      <el-input v-model="currentRow.slopeLevel" type="number" clearable placeholder=""></el-input>
    </el-form-item>
    <el-form-item label="防护结构类型">
      <el-checkbox-group v-model="currentRow.protectionTypeList">
        <el-checkbox v-for="item in EnumProtectionTypeList" :key="item.code" :label="item.code">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <div class="geology-children">
      防护信息
      <el-button size="mini" type="primary" @click="addProtectionDetail" icon="el-icon-circle-plus-outline">添加
      </el-button>
    </div>
    <div class="add-tab">
      <el-table border :data="currentRow.protectionDetailList" class="m-t-24">
        <el-table-column label="级数">
          <template slot-scope="scope">
            <el-form-item :prop="`protectionDetailList.${scope.$index}.level`">
              <el-input v-model="scope.row.level" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="坡率">
          <template slot-scope="scope">
            <el-form-item :prop="`protectionDetailList.${scope.$index}.gradient`">
              <el-input v-model="scope.row.gradient" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="支护措施">
          <template slot-scope="scope">
            <el-form-item :prop="`protectionDetailList.${scope.$index}.dept`">
              <el-input v-model="scope.row.dept" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="规格尺寸">
          <template slot-scope="scope">
            <el-form-item :prop="`protectionDetailList.${scope.$index}.size`">
              <el-input v-model="scope.row.size" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-form-item :prop="`protectionDetailList.${scope.$index}.count`">
              <el-input v-model="scope.row.count" type="number" placeholder="请输入" :maxlength="20"
                        style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-form-item :prop="`protectionDetailList.${scope.$index}.remark`">
              <el-input v-model="scope.row.remark" placeholder="请输入" :maxlength="20" style="width:100%"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDeleteProtectionDetail(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="geology">
      排水措施
    </div>
    <el-form-item label="地表排水措施">
      <el-checkbox-group v-model="currentRow.waterDrainStepList" @change="ChangeOtherWater">
        <el-checkbox v-for="item in EnumWaterDrainStepList" :key="item.code" :label="item.code">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="描述" v-if="otherWater || currentRow.waterDrainStepRemark">
      <el-input v-model="currentRow.waterDrainStepRemark"
                placeholder="请描述其他 地表排水措施"></el-input>
    </el-form-item>
    <el-form-item label="地下排水措施">
      <el-checkbox-group v-model="currentRow.groundwaterDrainStepList" @change="ChangeOtherGroundWater">
        <el-checkbox v-for="item in EnumGroundwaterDrainStepList" :key="item.code" :label="item.code">{{item.name}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="描述" v-if="otherGroundWater || currentRow.groundwaterDrainStepRemark">
      <el-input v-model="currentRow.groundwaterDrainStepRemark"
                placeholder="请描述其他 地下排水措施"></el-input>
    </el-form-item>
    <div class="geology">
      pdf设计文件
    </div>
    <div v-if="isLook">
    <div v-for="(item,index) in fileList" :key="index" style="text-align: center;display: inline-block;margin-left: 20px;font-size: 20px">
      <a :download="item.name" :href="item.url" style="color:black">
        <i class="iconfont iconPDF" style="font-size: 70px;color:red"></i>
        <br/>
        {{item.name}}
      </a>
    </div>
  </div>
    <upload-file v-model="currentRow.designFileList" ref="uploadClear" v-else></upload-file>
  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import UploadFile from '@/components/upload-file'

export default {
  props: ['value','isLook'],
  mixins: [ItemMixins],
  components: {UploadFile},
  data() {
    return {
      EnumProtectionTypeList:[],
      EnumWaterDrainStepList:[],
      EnumGroundwaterDrainStepList:[],
      protectionDetailList:[],

      sectionList: [],
      // 单位信息表单 校验规则
      rulesUnit: {
        validCode: {required: true, message: '请输入验证码'},
      },
      // 获取验证码文案
      verificationCodeText: '获取验证码'
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {  //选择路线

    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    //如果是查看详情，把文件地址处理
    if(this.isLook){
      this.filePathHandle(this.currentRow.designFileList)
    }
    this.queryDictList(['EnumProtectionType','EnumWaterDrainStep','EnumGroundwaterDrainStep'],
      ['EnumProtectionTypeList','EnumWaterDrainStepList','EnumGroundwaterDrainStepList'])
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .m-t-24 {
    .el-form-item__content {
      margin-left: 0px !important;
    }

    .el-button--text {
      color: red;
    }

    .el-form-item {
      margin-bottom: 0px;
    }
  }

  .add-tab {
    margin-left: 20px;

    .el-table .cell {
      padding: 0 10px !important;
      line-height: 13px !important;
    }

    .el-table td, .el-table th {
      padding: 5px 0;
      font-size: 13px;
    }

    .el-button {
      padding-right: 10px;
    }

  }


</style>
